<template>
  <div id="loginDom">
    <unify-header></unify-header>
    <div id="register">
      <div class="reLe">
        <div class="rep2">
          <span>已有账号？</span>
          <a href="/user/login/login"><span class="redd">马上登录</span></a>
        </div>
        <el-form :model="numberValidateForm" :rules="rules" ref="numberValidateForm" class="demo-ruleForm">
          <!--手机号码-->
          <el-form-item class="repb repb1" label="" prop="telephoneNumber">
            <el-input type="'number" v-model="numberValidateForm.telephoneNumber" placeholder="请输入手机号" :maxlength="11"
                      :minlength="11"></el-input>
          </el-form-item>

          <!--手机验证码-->
          <el-form-item class="repb repb3" label="" prop="codeNumber" :rules="rules.codeNumber">
            <!--<el-input class="inputWidth" placeholder="请输入验证码" v-model.number="numberValidateForm.codeNumber"></el-input>-->
            <input class="inputWidth el-input__inner" placeholder="请输入验证码"
                   v-model.number="numberValidateForm.codeNumber" type="text">
            <input class="pt2 l" type="button" @click="getCodeNumber" value="获取验证码">
          </el-form-item>
          <!--用户名-->
          <!--<el-form-item class="repb repb1" label="" prop="userName" :rules="rules.userName">-->
          <!--<el-input  placeholder="请输入用户名" v-model="numberValidateForm.userName"></el-input>-->
          <!--</el-form-item>-->
          <!--邮箱-->
          <!--<el-form-item class="repb repb4" label="" prop="emailNumber" :rules="rules.emailNumber">-->
          <!--<el-input  placeholder="请输入绑定的邮箱" v-model="numberValidateForm.emailNumber"></el-input>-->
          <!--</el-form-item>-->
          <!--密码-->
          <el-form-item class="repb repb4" label="" prop="password" :rules="rules.password">
            <!--<el-input  v-model="numberValidateForm.emailNumber"></el-input>-->
            <el-input type="password" placeholder="设置密码" v-model="numberValidateForm.password"
                      auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item class="repb repb5" label="" prop="passwordTwo" :rules="rules.passwordTwo">
            <!--<el-input  v-model="numberValidateForm.emailNumber"></el-input>-->
            <el-input type="password" placeholder="确认密码" v-model="numberValidateForm.passwordTwo"
                      auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <!--<div class="repb repb1">-->
        <!--<input class="reipt l" v-model="telephoneNumber" type="text" placeholder="输入手机号">-->
        <!--<span class="error_span" v-show="telephoneNumber.length <= 0">*手机号不能为空</span>-->
        <!--</div>-->
        <!--<div class="repb repb3">-->
        <!--<input class="reipt l" type="text" placeholder="输入验证码">-->
        <!--<input class="pt2 l"  type="button"  value="获取验证码">-->
        <!--<span class="error_span">*验证码不能为空</span>-->
        <!--</div>-->
        <!--<div class="repb repb1">-->
        <!--<input class="reipt" minlength="4" type="text" placeholder="用户名">-->
        <!--<span class="error_span">*用户名不能为空</span>-->
        <!--</div>-->
        <!--<div class="repb repb4">-->
        <!--<input class="reipt l " type="text" placeholder="请输入绑定的邮箱">-->
        <!--<span class="error_span">*邮箱不能为空</span>-->
        <!--</div>-->
        <!--<div class="repb repb4">-->
        <!--<input class="reipt l " minlength="6" maxlength="20" type="password" placeholder='设置密码'>-->
        <!--<span class="error_span">*密码不能为空</span>-->
        <!--</div>-->
        <!--<div class="repb repb5"><input class="reipt l" minlength="6" maxlength="20" type="password" placeholder="确认密码">-->
        <!--<span class="error_span">*两次密码输入不一致</span>-->
        <!--</div>-->
        <div class="repb repb6">
          <div class="newlL l">
            <div class="rok m">
              <p class="roker m"></p>
            </div>
          </div>
          <div class="rerr l">
            我已阅读并接受《传给雅昌服务条款》
          </div>
        </div>
        <div class="zc01">
          <a @click="submitForm('numberValidateForm')" style="margin-bottom: 40px;" class="zhuce">注册&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;REGISTER</a>
        </div>
      </div>
      <div class="reRe">
        <p>使用第三方账号
          <br><span>实现快速注册</span>
        </p>
        <ul class="reUl">
          <li class="oli1" @click="login">
            <a><i style="color: #0cb209;font-size: 30px;position: relative;left: -10px;top: 5px;" class="iconfont">&#xe605;</i>微信登录</a>
          </li>
        </ul>
      </div>
    </div>
    <unify-footer></unify-footer>
  </div>
</template>
<script>
  import Header from '@/components/header/header.vue'
  import Footer from '@/components/footer/footer.vue'
  import Api from '@/api.js'

  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          if (this.numberValidateForm.passwordTwo !== '') {
            this.$refs.numberValidateForm.validateField('passwordTwo')
          }
          callback()
        }
      }
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.numberValidateForm.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        numberValidateForm: {
          telephoneNumber: '',
          codeNumber: '',
//            userName: '',
//            emailNumber: '',
          password: '',
          passwordTwo: ''
        },
        rules: {
          telephoneNumber: [
            {required: true, message: '请填写手机号', trigger: 'blur'},
            {min: 11, message: '手机号长度为11位', trigger: 'blur'}
          ],
          codeNumber: [
            {required: true, message: '验证码不能为空'}
          ],
//            userName: [
//              {required: true, message: '请输入用户名', trigger: 'blur'},
//              {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
//            ],
//            emailNumber: [
//              { required: true, message: '请输入邮箱地址', trigger: 'blur' },
//              { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
//            ],
          password: [
            {validator: validatePass, trigger: 'blur'}
          ],
          passwordTwo: [
            {validator: validatePass2, trigger: 'blur'}
          ]
        }
      }
    },
    components: { //引入组件
      'unify-header': Header,
      'unify-footer': Footer
    },
    methods: { //执行的方法函数
      submitForm(formName) {
        let from = this.numberValidateForm
        console.log(from)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let jsons = {
              mobile: from.telephoneNumber,
              captcha: from.codeNumber,
              pwd: from.passwordTwo,
              client: 'pc'
            }
            Api.userInfoList.userRegister(jsons).then((res) => {
              if (res.data.status === 'OK') {
                //this.$alert(res.data.message, '提示')
                this.$confirm(res.data.message, '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  window.location.href = '/user/loginCallback?userDbId=' + res.data.data.passId + '&userName=' + res.data.data.nickname
                })
                //window.location.href = '/user/loginCallback?userDbId=' + res.data.data.passId + '&userName=' + res.data.data.nickname
              } else {
                this.$alert(res.data.message, '提示')
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      getCodeNumber() {
        if (this.numberValidateForm.telephoneNumber !== '') {
          Api.userInfoList.getCodeNumber({
            mobile: this.numberValidateForm.telephoneNumber,
            type: 'register'
          }).then((res) => {
            if (res.data.status === 'OK') {
              this.$alert(res.data.message, '提示')
            }
          })
        }
      },
      login: function () {
        Api.user.login({"t": "1"}).then(res => {
          window.location.href = res.data.authorizeCodeUrl
        }, err => {
          console.log(err)
          alert('Error')
        })
      }
    },
    created() {
    },
    mounted() {
    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/sass">
  #loginDom {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    #register {
      width: 960px;
      margin: 0 auto;
      height: auto;
      overflow: hidden;
      margin-top: 14px;

      .reLe {
        width: 660px;
        border: 1px solid #d8d8d8;
        background: white;
        padding-bottom: 30px;
        margin-bottom: 80px;
        float: left;
        .rep2 {
          font-size: 18px;
          margin-top: 60px;
          padding-right: 96px;
          text-align: right;
          margin-bottom: 55px;
          line-height: 40px;
          overflow: hidden;
        }
        .repb {
          height: 55px;
          padding-left: 118px;
          margin-bottom: 28px;
          position: relative;

        }
        .inputWidth {
          width: 260px;
          float: left;
        }
        .el-form-item__content {
          width: 460px;
          height: 50px;
        }
        .el-input__inner {
          height: 100% !important;
        }
        .el-input {
          height: 100% !important;
        }
        .repb1 {
          background: url(./f-sj_03.png) no-repeat 39px 0;
        }
        .error_span {
          position: absolute;
          top: 58px;
          left: 150px;
          font-size: 12px;
          color: #A00912;
        }
        .reipt {
          height: 50px;
          width: 420px;
          font-size: 18px;
          padding-left: 30px;
          line-height: 50px;
        }
        .l {
          float: left;
        }
        .repb3 {
          background: url(f-tb1_07.png) no-repeat 40px center;
        }
        .repb3 input {
          width: 260px;
        }
        .repb3 .pt2 {
          line-height: 50px;
          text-align: center;
          width: 160px;
          height: 50px;
          color: rgb(160, 9, 18);
          font-size: 18px;
          cursor: pointer;
          margin-left: 20px;
          margin-right: 18px;
          font-family: 微软雅黑;
          transition: all 0.4s;
          border-radius: 4px;
          background: white;
          border-width: 1px;
          border-style: solid;
          border-color: rgb(161, 161, 161);
          border-image: initial;
        }
        .repb3 .pt2:hover {
          background-color: rgb(160, 9, 18);
          color: #fff;
        }
        .repb4 {
          background: url(./f-tb_10.png) no-repeat 40px center;
        }
        .repb5 {
          background: url(./dsf-f_06.png) no-repeat 40px center;
        }
        .reipt {
          height: 50px;
          width: 420px;
          font-size: 18px;
          padding-left: 30px;
          line-height: 50px;
        }
        .newlL {
          width: 30px;
          height: 50px;
          cursor: pointer;
        }
        .m {
          margin: 0 auto;
        }
        .rok {
          height: 16px;
          width: 16px;
          border: 1px solid #C1C1C1;
          margin-top: 16px;
        }
        .roker {
          height: 8px;
          width: 8px;
          border-radius: 4px;
          background: #A00912;
          margin-top: 4px;
        }
        .zc01 {
          text-align: center;
        }
        .zhuce {
          height: 30px;
          width: 202px;
          font-size: 16px;
          color: white;
          border-radius: 4px;
          background: #A00912;
          border: none;
          cursor: pointer;
          display: inline-block;
          line-height: 30px;
          margin-top: 22px;
          margin-bottom: 44px;
        }
        .rerr {
          line-height: 50px;
          font-size: 16px;
          margin-left: 15px;
          cursor: pointer;
        }
      }
      .reRe {
        width: 282px;
        height: 492px;
        border: 1px solid #d8d8d8;
        background: white;
        margin-bottom: 30px;
        float: right;
        > p {
          text-align: center;
          font-size: 24px;
          line-height: 30px;
          margin-top: 50px;
          margin-bottom: 10px;
        }
        .reUl li {
          height: 60px;
          margin-bottom: 45px;
          line-height: 60px;
          cursor: pointer;
          transition: all 0.4s;
          position: relative;
        }
        .oli1 {
          /*background: url(./dsf-f_06.png) no-repeat 40px center;*/
        }
        .reUl li a {
          font-size: 18px;
          color: #333;
          margin-left: 120px;
        }
        .reUl li:hover {
          left: 8px;
        }
      }
    }
    .redd {
      color: #A00912;
    }
  }
</style>
